<!--
 * @Author: wang
 * @Date: 2020-09-22 18:05:20
 * @LastEditTime: 2020-08-13 09:16:04
 * @LastEditors: wang
 * @Description: 应急调度 按需筛选列表
 * @FilePath: \c-u-f\src\App.vue
-->
<template>
  <!-- <div :class="computed" style="height:100%;"> -->
  <div class="tab_box">
    <div class="tab_head">
      <div v-for="(tabitem, index) in tab" :key="index">
        <div :class="['tab_item ', tabindex == index ? 'tab_active' : '']" @click="Tabswitch(index)">{{ tabitem }}</div>
      </div>
      <!-- <div class="edit_btn" v-if="editindex == 0" @click="edit">编辑</div> -->
      <div class="edit_btn" @click="edit" v-if="editindex == 0">
        <span class="span-test" style="height:1px"></span>
        <div class="edit_text">编辑</div>
      </div>
      <div class="edit_btn2" @click="edit" v-else>
        <span class="span-test" style="height:30px"></span>
        <div class="edit_text">保存</div>
      </div>
    </div>
    <!-- 物资非编辑 -->
    <div :style="{ width: '100%', height: material == 0 ? 'calc(100vh - 182px)' : 'calc(100vh - 182px)'}" class="conboxbor " v-if="tabindex == 0 && editindex == 0">
      <div class="container bk4" style="width:96%;margin:0 auto;height:calc(100vh - 214px);overflow:auto;" v-if="material == 0">
        <div>
          <!-- <div>
            <div style="color: #FFFFFF;opacity: 0.5;border-bottom:1px solid #ffffff;display:flex;">
              <div style="width:20px;margin-right:5px;" v-if="editindex!=0"></div>
              <div style="min-width:100px;text-align:center;">类型</div>
              <div :style="{width:editindex==0?'62px':'52px'}"></div>
              <div style="min-width:133px;text-align:center;">数量</div>
            </div>
          </div>-->
          <div style="box-sizing:border-box;padding:10px 0;">
            <div v-for="(item, index) in list1" :key="index" style="margin-bottom:20px;">
              <!-- <td colspan="2"> -->
              <div :class="[theme == 'dark' ? 'bk1' : 'bk2']" style="margin-bottom:10px;margin-left:10px;width:90%;height:23px;">{{ item.suppliesPointName || item.suppliesName }}</div>
              <!-- </td> -->
              <div v-for="(items, index) in item.suppliesReserveList" :key="index" style="display:flex;margin-top:20px;">
                <div class="checkbox" style="width:20px;" v-if="editindex != 0">
                  <input type="checkbox" :checked="items.state == 1 ? true : false" />
                  <label class="chckbx" @click="choicedel(items.id)"></label>
                </div>
                <div @click="choice1(items.id, item.list, 2)">
                  <div :class="['title', items.active == 1 ? 'title_bj2' : 'title_bj1']">
                    <select disabled="true">
                      <option :value="items.reserveName">{{ items.reserveName }}</option>
                    </select>
                  </div>
                </div>
                <div :style="{ width: editindex == 0 ? '59px' : '39px' }"></div>
                <div>
                  <div class="num_box">
                    <div @click="reduce(items)">
                      <!-- <img src="@/assets/images/reduce.png" /> -->
                      <img src="@/assets/images/reduce.png" v-if="theme == 'dark'" />
                      <img src="@/assets/images/b_reduce.png" v-else />
                    </div>
                    <div class="num">
                      <input type="text" v-model.number="items.count" @blur="getarea(items)" style="text-align:right;" />
                      <span class="fontcolor">/{{ items.scheduleCount }}</span>
                    </div>
                    <div @click="plus(items, items.scheduleCount)">
                      <!-- <img src="@/assets/images/plus.png" /> -->
                      <img src="@/assets/images/plus.png" v-if="theme == 'dark'" />
                      <img src="@/assets/images/b_plus.png" v-else />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div :class="['container', theme == 'dark' ? 'bk4' : 'bk5']" style="width:93%;height:calc(100vh - 214px);margin:0 auto;overflow:auto;" v-else>
        <div class="list_item" v-for="(item, index) in wuzilist" :key="index">
          {{ index + 1 }}.已从 {{ item.suppliesPointName || item.rescueEmergencySuppliesName }} 调集 {{ item.count || item.scheduleCount }} 把 {{ item.suppliesName || item.reserveName }}
        </div>
        <!-- <div class="list_item">2.已从 物资点1 调集 500 把 铁锹</div>
        <div class="list_item">3.已从 物资点1 调集 500 把 铁锹</div> -->
      </div>
    </div>
    <!-- 物资编辑状态列表 -->
    <div style="width:100%;height:calc(100vh - 182px);" v-if="tabindex == 0 && editindex != 0">
      <div class="container bk4" style="width:96%;height:calc(100vh - 214px);margin:0 auto;">
        <table>
          <thead>
            <tr style="opacity: 0.5;" :class="theme == 'dark' ? 'bk1' : 'bk2'">
              <th style="width:20px;margin-right:5px;" v-if="editindex != 0"></th>
              <th style="min-width:100px;">物资类型</th>
              <th :style="{ width: editindex == 0 ? '62px' : '52px' }"></th>
              <th style="min-width:133px;">数量</th>
            </tr>
          </thead>
          <tbody style="box-sizing:border-box;padding:10px 0;height: calc(100vh - 265px)" class="bk3">
            <tr v-for="(item, index) in materiallist" :key="index">
              <td class="checkbox" style="width:20px;" v-if="editindex != 0">
                <input type="checkbox" :checked="item.state == 1 ? true : false" />
                <label class="chckbx" @click="choicedel(item.id, 1)"></label>
              </td>
              <td @click="choice(item.typeId, 1)">
                <div :class="['title', item.active == 1 ? 'title_bj2' : 'title_bj1']">
                  <select v-model="item.typeId" @change="choice(item.typeId, 1)">
                    <option v-for="items in getsuppliestypeList" :key="items.id" :value="items.id">{{ items.name }}</option>
                  </select>
                </div>
              </td>
              <td :style="{ width: editindex == 0 ? '59px' : '39px' }"></td>
              <td>
                <div class="num_box">
                  <div @click="reduce(item)">
                    <img src="@/assets/images/reduce.png" v-if="theme == 'dark'" />
                    <img src="@/assets/images/b_reduce.png" v-else />
                  </div>
                  <div class="num">
                    <input type="text" v-model.number="item.count" @blur="getarea(item)" />
                  </div>
                  <div @click="plus(item)">
                    <img src="@/assets/images/plus.png" v-if="theme == 'dark'" />
                    <img src="@/assets/images/b_plus.png" v-else />
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!-- 救援队 -->
    <div style="width:100%;height:calc(100vh - 182px);" class="conboxbor" v-if="tabindex == 1">
      <div class="container bk4" style="width:96%;margin:0 auto;height:calc(100vh - 214px);overflow:auto;" v-if="material2 == 0">
        <div v-for="(item, index) in Rescueteam" :key="index">
          <div class="select_box">
            <div class="checkbox" style="width:20px;" v-if="editindex != 0">
              <input type="checkbox" :checked="item.state == 1 ? true : false" />
              <label class="chckbx" @click="choicedel(item.id, 2, item.list)" style="margin-left:0;margin-top:5px;"></label>
            </div>
            <select v-model="item.typeId" @change="gettype(item)">
              <option value="">请选择</option>
              <option v-for="(item, index) in selectlist" :key="index" :value="item.id">{{ item.name }}</option>
            </select>
          </div>
          <div v-for="(items, index) in item.list" :key="index" style="display:flex;margin-top:20px;">
            <div>
              <!-- {{items.teamName}} -->
              <div :class="['title', items.active == 1 ? 'title_bj2' : 'title_bj1']">
                <Tooltip :content="items.teamName" placement="top">
                  <select v-model="items.teamName" :disabled="editindex == 1 ? false : true" @change="choice(items.id, 2, items.teamName)">
                    <option v-for="(item, index) in item.jydnamelist" :value="item.teamName" :key="index">{{ item.teamName }}</option>
                  </select>
                </Tooltip>
              </div>
            </div>
            <div :style="{ width: editindex == 0 ? '59px' : '9px' }"></div>
            <div>
              <div class="num_box">
                <div @click="reduce(items)">
                  <img src="@/assets/images/reduce.png" v-if="theme == 'dark'" />
                  <img src="@/assets/images/b_reduce.png" v-else />
                </div>
                <div class="num">
                  <input type="text" v-model.number="items.count" @blur="getarea(items)" style="text-align:right;" />
                  <span class="fontcolor">/{{ items.number }}</span>
                </div>
                <div @click="plus(items, items.number)">
                  <img src="@/assets/images/plus.png" v-if="theme == 'dark'" />
                  <img src="@/assets/images/b_plus.png" v-else />
                </div>
              </div>
            </div>
            <div
              v-if="editindex != 0"
              style="width:22px;height:22px;margin-left:7px;margin-top:4px;
background: rgba(255,255,255,0.1);
border-radius: 50%;"
              @click="delitems(item.list, index)"
            >
              <img src="@/assets/images/del.png" style="width:22px;height:22px;" />
            </div>
          </div>
          <div style="margin-left:23px;margin-top:10px;" v-if="editindex != 0">
            <div class="itemadd" @click="addrescueteam(index, item)">
              +添加
            </div>
          </div>
        </div>
      </div>
      <div :class="['container', theme == 'dark' ? 'bk4' : 'bk5']" style="width:93%;height:calc(100vh - 214px);margin:0 auto;box-sizing:border-box;padding-top:1px;" v-else>
        <div class="list_item" v-for="(item, index) in jydlist" :key="index">{{ index + 1 }}.已从 {{ item.teamName }} 调集 {{ item.scheduleCount }} 人</div>
        <!-- <div class="list_item">2.已从 救援队2 调集 500 把 铁锹</div>
        <div class="list_item">3.已从 救援队3 调集 500 把 铁锹</div> -->
      </div>
    </div>
    <!-- 避灾点 -->
    <div style="width:100%;height:calc(100vh - 182px);" v-if="tabindex == 2">
      <div v-if="material3 === 0">
        <div class="Number_victims">
          目前受灾人数
          <span class="number">{{ peopleCount }}</span
          >人
        </div>
        <div class="container" style="width:96%;margin:0 auto;height:calc(100vh - 214px);">
          <table>
            <thead>
              <tr style="color: #FFFFFF;opacity: 0.5;border-bottom:1px solid #ffffff;">
                <th style="width:20px;margin-right:5px;" v-if="editindex != 0"></th>
                <th style="min-width:100px;">避灾点</th>
                <th :style="{ width: editindex == 0 ? '62px' : '52px' }"></th>
                <th style="min-width:133px;">容纳人数</th>
              </tr>
            </thead>
            <tbody style="border-bottom:1px solid rgba(255,255,255,0.5);box-sizing:border-box;padding:10px 0;height: calc(100vh - 280px);">
              <tr v-for="(item, index) in avoidingdisaster" :key="index">
                <td class="checkbox" style="width:20px;" v-if="editindex != 0">
                  <input type="checkbox" :checked="item.state == 1 ? true : false" />
                  <label class="chckbx" @click="choicedel(item.id, 3)"></label>
                </td>
                <td>
                  <div :class="['title', item.active == 1 ? 'title_bj2' : 'title_bj1']">
                    <Tooltip :content="item.siteName" placement="top">
                      <select v-model="item.settlementId" :disabled="editindex == 1 ? false : true" @change="choice(item.id, 3, item.siteName)">
                        <option v-for="(itemf, index) in bzdnamelist" :value="itemf.id" :key="index">{{ itemf.siteName }}</option>
                      </select>
                    </Tooltip>
                  </div>
                  <!-- <div :class="['title']">{{ item.siteName }}</div> -->
                </td>
                <td :style="{ width: editindex == 0 ? '59px' : '39px' }"></td>
                <td>
                  <div class="num_box">
                    <div @click="reduce(item)">
                      <img src="@/assets/images/reduce.png" v-if="theme == 'dark'" />
                      <img src="@/assets/images/b_reduce.png" v-else />
                    </div>
                    <div class="num">
                      <input type="text" v-model.number="item.count" @blur="getarea(item)" style="text-align:right;" />
                      <span class="fontcolor">/{{ item.capacity }}</span>
                    </div>
                    <div @click="plus(item, item.capacity)">
                      <img src="@/assets/images/plus.png" v-if="theme == 'dark'" />
                      <img src="@/assets/images/b_plus.png" v-else />
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div :class="['container', 'conboxbor', theme == 'dark' ? 'bk4' : 'bk5']" style="width:93%;height:calc(100vh - 214px);;margin:0 auto;overflow:auto;" v-else>
        <!-- <div class="list_item">1.已从 避灾点1 调集 50 人</div> -->
        <div class="list_item" v-for="(item, index) in bzdlist" :key="index">{{ index + 1 }}. {{ item.settlementName || item.siteName }} 安置 {{ item.count || item.settlementCount }} 人</div>
        <!-- <div class="list_item">3.已从 避灾点3 调集 50 人</div> -->
      </div>
    </div>
    <div>
      <div class="btn_box" v-if="editindex == 0">
        <div v-if="tabindex == 0">
          <div class="btn materialback" v-if="material == 1" @click="backedit(2)">返回</div>
          <div class="btn" style="margin:0 auto;" @click="backedit(3)" v-else>确认</div>
        </div>
        <div v-if="tabindex == 1">
          <div class="btn materialback" v-if="material2 == 1" @click="backedit(2)">返回</div>
          <div class="btn" style="margin:0 auto;" @click="backedit(3)" v-else>确认</div>
        </div>
        <div v-if="tabindex == 2">
          <div class="btn materialback" v-if="material3 == 1" @click="backedit(2)">返回</div>
          <div class="btn" style="margin:0 auto;" @click="backedit(3)" v-else>确认</div>
        </div>
      </div>
      <div class="btn_box" v-else>
        <div class="btn" @click="add">添加</div>
        <div class="btn del_btn" @click="dellist" v-if="editindex == 1">删除</div>
        <div class="btn del_btn deloption" v-else>删除</div>
      </div>
    </div>
    <!-- <div v-else>
        <div class="btn_box" v-if="tabindex == 0 && editindex == 0">
          <div class="btn back" @click="backedit(2)" v-if="material == 0 || material == 1 ||material==2">返回1</div>
          <div class="btn" v-if="material == -1" @click="backedit(3)">确认</div>
          <div class="btn materialback" v-if="material == 1" @click="backedit(2)">返回</div>
        </div>
        <div class="btn_box" v-else>
          <div class="btn" @click="add">添加</div>
          <div class="btn del_btn" @click="dellist" v-if="editindex == 1">删除</div>
          <div class="btn del_btn deloption" v-else>删除</div>
        </div>
      </div> -->
  </div>
  <!-- </div> -->
</template>
<script>
import { mapState } from 'vuex'
import { getPlanPaths } from '@/utils/map/routePlan'
import {
  getSuppliesTypeList,
  getRescueTeamTypeList,
  requiredScheduleSearchsupplies,
  scheduleRequireAffectedsupplies,
  requiredScheduleSearchteam,
  requiredScheduleSearchrescue,
  scheduleRequireAffectedteam,
  scheduleRequireAffectedsettlement,
  getAffectedPointDetails
} from '@/api/index'
export default {
  props: {
    popObj: {
      type: Object
      // default: 2
    }
  },
  data() {
    return {
      tab: ['物资', '救援队', '避灾点'],
      tabindex: 0,
      editindex: 1,
      material: 0,
      material2: 0,
      material3: 0,
      wuzilist: [],
      jydlist: [],
      jydnamelist: [],
      bzdlist: [],
      bzdnamelist: [],
      materiallist: [],
      Rescueteam: [],
      avoidingdisaster: [],
      list1: [],
      selectlist: [], // 救援队类型
      rescueteamlist: [], // 救援队添加列表
      getsuppliestypeList: [],
      settlementList: [],
      id: '', // 受灾点id
      peopleCount: '',
      // popObj: {}, // 受灾点信息
      rescueTeamList: [], // 救援队
      suppliesList: [], // 物资点
      settlementList: [], // 避灾点
      typeId: ''
    }
  },
  computed: {
    ...mapState(['theme'])
  },

  watch: {
    popObj: {
      // 监听搜索切换
      handler(newVal) {
        this.intdata()
      }
    }
  },
  mounted() {
    this.popObj = JSON.parse(localStorage.getItem('szdObj'))
    this.id = localStorage.getItem('id')
    this.intdata()
  },
  methods: {
    searchrescue () {
      requiredScheduleSearchrescue({ affectedCount: this.peopleCount,
        affectedPointId: this.popObj.id }).then(res => {
        console.log(res)
        this.bzdnamelist = []
        if (res.code === 200) {
          this.settlementList = res.result.settlementList.map(item => {
            return {
              state: 0,
              active: 0,
              count: item.capacity,
              ...item
            }
          })
          this.settlementList.forEach(item => {
            this.bzdnamelist.push(item)
          })
          console.log(this.bzdnamelist)
        }
      })
    },
    intdata () {
      this.suppliestypelist()
      this.getrescueTeamtypelist()
      this.searchrescue()
      getAffectedPointDetails({ id: this.popObj.id }).then(res => {
        if (res.code === 200) {
          this.peopleCount = res.result.affectedCount
          if (res.result.rescueTeamTypeList) {
            res.result.rescueTeamTypeList.map(item => {
              if (item.rescueTeamList) {
                this.rescueTeamList = [...item.rescueTeamList]
              } else {
                this.rescueTeamList = []
              }
              item.rescueTeamList.map(items => {
                items.number = items.scheduleCount
              })
              item.typeId = item.rescueTeamType
              item.list = item.rescueTeamList
              item.jydnamelist = JSON.parse(JSON.stringify(item.rescueTeamAllList))
              item.rescueteamlist = JSON.parse(JSON.stringify(item.rescueTeamAllList))
              item.rescueteamlist = item.rescueteamlist.map(item => {
                return {
                  state: 0,
                  ...item
                }
              })
            })
            this.Rescueteam = res.result.rescueTeamTypeList
            if (this.Rescueteam) {
              this.Rescueteam = this.Rescueteam.map(item => {
                return {
                  state: 0,
                  ...item
                }
              })
            }
          }
          if (res.result.suppliesList) {
            this.suppliesList = []
            res.result.suppliesList.forEach(item => {
              if (item.suppliesReserveList) {
                this.suppliesList = [...this.suppliesList, ...item.suppliesReserveList]

                this.wuzilist = this.suppliesList
              }
            })
            if (res.result.affectedSuppliesDemandList) {
              this.materiallist = res.result.affectedSuppliesDemandList.map(items => {
                return {
                  typeId: items.suppliesReserveTypeId,
                  state: 0,
                  count: items.scheduleCount,
                  ...items
                }
              })
            }
            this.list1 = res.result.suppliesList
          }
          this.settlementList = res.result.settlementList || []
          this.avoidingdisaster = res.result.settlementList || []
          this.Tabswitch(0)
        }
      })
    },
    // 获取物资类型
    suppliestypelist() {
      getSuppliesTypeList().then(res => {
        if (res.code === 200) {
          this.getsuppliestypeList = res.result
        }
      })
    },
    // 获取救援队类型
    getrescueTeamtypelist() {
      getRescueTeamTypeList().then(res => {
        if (res.code === 200) {
          this.selectlist = res.result
        }
      })
    },
    getdetail() {},
    // 选择救援队类型
    gettype (obj) {
      // this.Rescueteam = []
      obj.jydnamelist = []
      obj.list = []
      requiredScheduleSearchteam({ typeId: obj.typeId,
        affectedPointId: this.id }).then(res => {
        if (res.code === 200) {
          // this.jydnamelist = res.result.rescueTeamList
          res.result.rescueTeamList.forEach(item => {
            item.state = 0
            item.active = 0
            item.count = item.number
          })
          const list = res.result.rescueTeamList
          obj.rescueteamlist = list
          list.forEach(item => {
            obj.jydnamelist.push(item)
          })
        }
      })
    },
    Tabswitch(index) {
      this.tabindex = index
      if (index === 0) {
        if (this.suppliesList && this.suppliesList.length) {
          this.editindex = 0
          this.material = 1
          this.wuzilist = this.suppliesList
        } else {
          this.editindex = 0
          this.material = 0
        }
      }
      if (index === 1) {
        console.log(this.rescueTeamList)
        if (this.rescueTeamList.length !== 0) {
          console.log(this.rescueTeamList)
          this.editindex = 0
          this.material2 = 1
          this.jydlist = this.rescueTeamList
        } else {
          this.editindex = 0
          this.material2 = 0
        }
      }

      if (index === 2) {
        this.searchrescue()
        if (this.settlementList.length !== 0) {
          this.editindex = 0
          this.material3 = 1
          this.bzdlist = this.settlementList
        } else {
          this.editindex = 0
          this.material3 = 0
        }
      }
    },
    check(obj, event) {
      obj.state = obj.state === 0 ? 1 : 0
    },
    edit() {
      this.editindex = this.editindex === 1 ? 0 : 1
      if (this.tabindex === 0) {
        this.material = 0
      } else if (this.tabindex === 1) {
        if (this.rescueTeamList && this.rescueTeamList.lenght) {
          this.material2 = 1
          this.jydlist = this.rescueTeamList
        } else {
          this.material2 = 0
        }
      } else if (this.tabindex === 2) {
        if (this.settlementList && this.settlementList.lenght) {
          this.material3 = 1
          this.bzdlist = this.settlementList
        } else {
          this.material3 = 0
        }
      }
      if (!this.id) {
        this.$Message.success('请选择受灾点')
        return
      }
      if (this.tabindex === 0) {
        const list = []
        this.materiallist.forEach(item => {
          const obj = {}
          obj.typeId = item.typeId
          obj.count = item.count
          list.push(obj)
        })
        if (list.length !== 0) {
          // 受灾点按需筛选物资点搜索
          requiredScheduleSearchsupplies({
            suppliesList: list,
            affectedPointId: this.id
          }).then(res => {
            if (res.code === 200) {
              res.result.forEach(item => {
                item.suppliesReserveList.forEach(items => {
                  items.count = 0
                })
              })
              this.list1 = res.result
              this.$emit('addicon', this.list1, this.tabindex)
            }
          })
        }
      } else if (this.tabindex === 1) {
        if (this.Rescueteam) {
          let data = []
          this.Rescueteam.map(item => {
            if (item.list) {
              data = item.list.map(items => {
                return {
                  ...items
                }
              })
            }
          })
          this.$emit('addicon', data, this.tabindex)
        }
      } else if (this.tabindex === 2) {
        if (this.avoidingdisaster) {
          this.$emit('addicon', this.avoidingdisaster, this.tabindex)
        }
      }
    },
    // 点击保存添加点
    append() {
      this.editindex = this.editindex === 1 ? 0 : 1
      if (this.tabindex === 0) {
        if (this.list1.length !== 0) {
          this.$emit('addicon', this.list1, this.tabindex)
        }
      } else if (this.tabindex === 1) {
        if (this.Rescueteam) {
          this.$emit('addicon', this.Rescueteam, this.tabindex)
        }
      } else if (this.tabindex === 2) {
        if (this.avoidingdisaster) {
          this.$emit('addicon', this.avoidingdisaster, this.tabindex)
        }
      }
    },
    choice(id, type, name) {
      if (type === 1) {
        this.materiallist.forEach(item => {
          if (id === item.id) {
            item.active = item.active === 0 ? 1 : 0
          } else {
            item.active = 0
          }
        })
      } else if (type === 2) {
        let itemid = {}
        this.jydnamelist.forEach(item => {
          if (name) {
            if (item.teamName === name) {
              itemid = item
            }
          }
        })
        this.Rescueteam.forEach(item => {
          if (id === item.id) {
            item.id = itemid.id
            item.count = itemid.count
            item.number = itemid.number
            item.x = itemid.x
            item.y = itemid.y
            item.active = item.active === 0 ? 1 : 0
          } else {
            item.active = 0
          }
        })
      } else if (type === 3) {
        let itemid = {}
        this.bzdnamelist.forEach(item => {
          if (name) {
            if (item.siteName === name) {
              itemid = item
            }
          }
        })
        this.avoidingdisaster.forEach(item => {
          if (id === item.id) {
            item.id = itemid.id
            item.count = itemid.count
            item.capacity = itemid.capacity
            item.x = itemid.x
            item.y = itemid.y
            item.active = item.active === 0 ? 1 : 0
          } else {
            item.active = 0
          }
        })
      }
    },
    choice1(id, data, type) {
      if (type === 2) {
        data.forEach(item => {
          if (id === item.id) {
            item.active = item.active === 0 ? 1 : 0
          } else {
            item.active = 0
          }
        })
      }
    },
    choicedel(id, type, data) {
      if (type === 1) {
        this.materiallist.forEach(item => {
          if (id === item.id) {
            item.state = item.state === 0 ? 1 : 0
          }
        })
      } else if (type === 3) {
        this.avoidingdisaster.forEach(item => {
          if (id === item.id) {
            item.state = item.state === 0 ? 1 : 0
          }
        })
      } else if (type === 2) {
        this.Rescueteam.forEach(item => {
          item.list.forEach(items => {
            if (id === items.id) {
              items.state = items.state === 0 ? 1 : 0
            }
          })
        })
      }
    },
    reduce(obj) {
      if (obj.count) {
        if (obj.count !== 0) {
          obj.count--
        } else {
          obj.count = 0
        }
      }
    },
    plus(obj, maxnum) {
      if (maxnum) {
        if (obj.count || obj.count === 0) {
          if (obj.count < maxnum) {
            obj.count++
          } else {
            this.$Message.success('数量不能大于最大值')
          }
        } else if (obj.capacity) {
          if (obj.capacity < maxnum) {
            obj.capacity++
          } else {
            this.$Message.success('数量不能大于最大值')
          }
        } else if (obj.number) {
          if (obj.number < maxnum) {
            obj.number++
          } else {
            this.$Message.success('数量不能大于最大值')
          }
        }
      } else {
        obj.count++
      }
    },
    add() {
      if (this.tabindex === 0) {
        const id = this.materiallist.length + 1
        const obj = {
          // name: '对讲机',
          id: id,
          count: 0,
          typeId: 1,
          state: 0,
          // maxnum: 50,
          active: 0
        }
        this.materiallist.push(obj)
      } else if (this.tabindex === 2) {
        if (this.settlementList && this.settlementList.length) {
          this.avoidingdisaster.push(this.settlementList[0])
          this.settlementList.shift()
        } else {
          this.$Message.success('避灾点已达上限')
        }
      } else if (this.tabindex === 1) {
        requiredScheduleSearchteam({ typeId: this.selectlist[0].id,
          affectedPointId: this.id }).then(res => {
          if (res.code === 200) {
            res.result.rescueTeamList.forEach(item => {
              item.state = 0
              item.active = 0
              item.count = item.number
            })
            const list = res.result.rescueTeamList
            this.rescueteamlist = list
            this.Rescueteam.push({ id: this.Rescueteam.length + 1,
              typeId: this.selectlist[0].id,
              list: [],
              jydnamelist: list,
              rescueteamlist: list,
              state: 0 })
          }
        })
      }
    },
    // 点击确认调度
    backedit(type) {
      const startPoint = [this.popObj.x, this.popObj.y]
      if (type === 1) {
        this.editindex = 1
      } else if (type === 3) {
        if (this.tabindex === 0) {
          this.material = 1
        } else if (this.tabindex === 1) {
          this.material2 = 1
        } else if (this.tabindex === 2) {
          this.material3 = 1
        }
      } else {
        if (this.tabindex === 0) {
          this.material = 0
        } else if (this.tabindex === 1) {
          this.material2 = 0
        } else if (this.tabindex === 2) {
          this.material3 = 0
        }
      }
      // const list = []
      const params = {}
      const promiseAll = []
      params.affectedId = this.id
      if (this.tabindex === 0 && type === 3) {
        params.suppliesPolyline = []
        if (!this.id) {
          this.$Message.success('请选择受灾点')
          return
        }
        const suppliesList = []
        this.list1.forEach(item => {
          item.id = item.suppliesPointId
          item.img = 'static/img/Bazd.991882d4.png'
          const obj = {}
          obj.suppliesId = item.suppliesPointId
          obj.suppliesReserveList = []
          params.suppliesPolyline.push({
            x: item.x,
            y: item.y
          })
          item.suppliesReserveList.forEach(items => {
            obj.suppliesReserveList.push({
              reserveId: items.reserveId,
              scheduleQuantity: items.count
            })
          })
          suppliesList.push(obj)
        })
        params.suppliesList = suppliesList
        const wzdPointlist = this.list1.map(item => {
          return {
            id: item.id,
            x: item.x,
            y: item.y
          }
        })
        const wzdRouterlist = []
        if (wzdPointlist.length) {
          wzdPointlist.forEach(item => {
            promiseAll.push(
              getPlanPaths({
                start: startPoint,
                end: [item.x, item.y]
              }).then(res => {
                wzdRouterlist.push(JSON.stringify(res.route.paths[0]))
              })
            )
          })
        }
        // debugger
        Promise.all(promiseAll).then(res => {
          params.suppliesPolyline = wzdRouterlist
          scheduleRequireAffectedsupplies(params).then(res => {
            if (res.code === 200) {
              this.wuzilist = res.result
            }
          })
        })
        this.$emit('addicon', this.list1, this.tabindex)
      } else if (this.tabindex === 1 && type === 3) {
        params.rescueTeamList = []
        let rescueteam = []
        this.Rescueteam.forEach(item => {
          rescueteam = [...rescueteam, ...item.list]
          if (item.list) {
            item.list.forEach(items => {
              item.img = 'static/img/Bazd.991882d4.png'
              const obj1 = {}
              obj1.teamId = items.id
              obj1.scheduleCount = items.count
              params.rescueTeamList.push(obj1)
            })
          }
        })
        // this.Rescueteam.forEach
        const jydPointlist = rescueteam.map(item => {
          return {
            id: item.id,
            x: item.x,
            y: item.y
          }
        })
        const jydRouterlist = []
        if (jydPointlist) {
          let jydCount = 0
          for (let i = 0; i < jydPointlist.length; i++) {
            if (jydCount === i) {
              jydCount++
              promiseAll.push(
                getPlanPaths({
                  start: startPoint,
                  end: [jydPointlist[i].x, jydPointlist[i].y]
                }).then(res => {
                  jydRouterlist.push(JSON.stringify(res.route.paths[0]))
                })
              )
            }
          }
        }
        // debugger
        Promise.all(promiseAll).then(res => {
          params.rescueTeamPolyline = jydRouterlist
          scheduleRequireAffectedteam(params).then(res => {
            if (res.code === 200) {
              this.jydlist = res.result
            }
          })
        })
        this.$emit('addicon', this.Rescueteam, this.tabindex)
      } else if (this.tabindex === 2 && type === 3) {
        params.settlementList = []
        this.avoidingdisaster.forEach(item => {
          item.img = 'static/img/Bazd.991882d4.png'
          const obj2 = {}
          obj2.settlementId = item.id
          obj2.scheduleCount = item.count
          params.settlementList.push(obj2)
        })
        const bzdPointlist = this.avoidingdisaster.map(item => {
          return {
            id: item.id,
            x: item.x,
            y: item.y
          }
        })
        const bzdRouterlist = []
        if (bzdPointlist.length) {
          bzdPointlist.forEach(item => {
            promiseAll.push(
              getPlanPaths({
                start: startPoint,
                end: [item.x, item.y]
              }).then(res => {
                bzdRouterlist.push(JSON.stringify(res.route.paths[0]))
              })
            )
          })
        }
        Promise.all(promiseAll).then(res => {
          params.settlementPolyline = bzdRouterlist
          scheduleRequireAffectedsettlement(params).then(res => {
            if (res.code === 200) {
              this.bzdlist = res.result
            }
          })
        })
        this.$emit('addicon', this.avoidingdisaster, this.tabindex)
      }
    },
    dellist() {
      if (this.tabindex === 0) {
        this.materiallist = this.materiallist.filter(item => item.state === 0)
      } else if (this.tabindex === 2) {
        this.avoidingdisaster.forEach(item => {
          if (item.state === 1) {
            this.settlementList.push(item)
          }
        })
        this.avoidingdisaster = this.avoidingdisaster.filter(item => item.state === 0)
      } else if (this.tabindex === 1) {
        // this.Rescueteam.forEach(item => {
        //   item.list.forEach(items => {
        //     if (items.state === 1) {
        //       this.rescueteamlist.push(items)
        //     }
        //   })
        //   item.list = item.list.filter(itemt => itemt.state === 0)
        // })
        this.Rescueteam = this.Rescueteam.filter(itemt => itemt.state === 0)
      }
    },
    getarea(obj) {
      if (obj.count) {
        if (typeof obj.count === 'number') {
          if (obj.count <= 0) {
            obj.count = 0
            this.$Message.warning('数量不能小于0')
            // return
          }
        } else {
          obj.count = 0
          this.$Message.warning('数量只能输入数字')
        }
      }
      if (obj.scheduleCount) {
        if (obj.count > obj.scheduleCount) {
          obj.count = obj.scheduleCount
          // this.$Message.warning('数量不能大于最大值')
        }
      }

      if (obj.number) {
        if (obj.count > obj.number) {
          obj.count = obj.number
          // this.$Message.warning('数量不能大于最大值')
        }
      }
      if (obj.capacity) {
        if (obj.count > obj.capacity) {
          obj.count = obj.capacity
          // this.$Message.warning('数量不能大于最大值')
        }
      }
    },
    // 添加救援队伍
    addrescueteam(index, obj) {
      if (obj.rescueteamlist.length) {
        let list = obj.list.map(n => n.teamTypeId)
        let lengthArray = new Set(list)
        if (lengthArray.length >= obj.jydnamelist.length) {
          this.$Message.success('列表救援队已达上限')
        } else {
          obj.rescueteamlist[0].count = obj.rescueteamlist[0].number
          this.Rescueteam[index].list.push({
            ...obj.rescueteamlist[0]
          })
          obj.rescueteamlist.shift()
        }
      } else {
        this.$Message.success('暂无救援队')
      }
    },
    // 删除救援队伍
    delitems(data, index) {
      data.splice(index, 1)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/index.scss';
.tab_box {
  width: 347px;
  // height: 100%;
  height: calc(100vh - 61px);
  // background-image: url('../../assets/images/dispatch_list_bj.png');
  background-size: 347px 100%;
  margin-left: auto;
  margin-top: 17px;
  z-index: 9999;
  @include themify($themes) {
    background: themed('dispatch_list_bj');
  }
}
.tab_head {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 10px 10px;
}
.tab_item {
  width: 80px;
  height: 30px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 30px;
  // background: rgba(255, 255, 255, 0.1);
  text-align: center;
  // color: #ffffff;
  // box-shadow: 1px 4px 6px 0px #0c1422;
  opacity: 0.7;
  cursor: pointer;
  margin-right: 10px;
  @include themify($themes) {
    background: themed('tab_item_bj');
    color: themed('search_font1');
  }
}
.tab_active {
  // background: rgba(70, 159, 255, 0.1);
  // border: 1px solid #72e6ff;
  // box-shadow: 1px 4px 6px 0px #0c1422;
  // color: #72e6ff;
  line-height: 28px;
  @include themify($themes) {
    background: themed('  tab_active_bj');
    color: themed('active_color');
  }
}
.theme-light .tab_active {
  border: 1px solid #027aff;
}
.theme-dark .tab_active {
  border: 1px solid #72e6ff;
}
.tab_box .container table tbody {
  width: 100%;
  // max-height: 767px;
  height: calc(100vh - 240px);
  overflow-y: auto;
}
.bg td {
  background: #1b393f;
}

.container table {
  // color: #e6e6e6;
  font-size: 14px;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  @include themify($themes) {
    color: themed('table_color_h');
  }
}

.conatiner table thead,
tbody,
tr,
th,
td {
  display: inline-block;
}

.container table thead {
  width: 100%;
  height: 40px;
  line-height: 40px;
  // color: #5cafd0;
  @include themify($themes) {
    color: themed('table_color_h');
  }
}
.bk1 {
  // @include themify($themes) {
  //   color: themed('table_font_thead');
  // }
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);

  color: #fff;
  opacity: 0.5;
}
.bk2 {
  // @include themify($themes) {
  //   color: themed('table_font_thead');
  // }
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.bk3 {
  @include themify($themes) {
    color: themed('table_font_thead');
  }
}
.bk4 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.bk5 {
  border-bottom: 1px solid rgba(66, 90, 100, 0.5);
}
// .bk2{
//   @include themify($themes) {
//     color: themed('table_font_thead');
//   }
//   border-bottom:1px solid rgba(255, 255, 255, 0.5);
// }
.container table thead tr {
  width: 100%;
  box-sizing: border-box;
}
.container table tbody tr {
  width: 100%;
  line-height: 25px;
  box-sizing: border-box;
  padding: 0;
  margin-bottom: 20px;
}

.container table tbody tr:nth-last-of-type(1) {
  border-bottom: none;
}

.container table tbody tr td {
  text-align: center;
}
.container table tbody .checkbox {
  width: 20px;
  border: none;
  background: none;
  margin-right: 5px;
  text-align: right;
  flex: none;
}
.checkbox .chckbx {
  height: 20px;
  width: 20px;
  // border: 1px solid #71e6ff;
  background: url('../../assets/images/del_false.png');
  background-size: contain;
  // border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}

.checkbox input[type='checkbox']:checked + .chckbx {
  background: url('../../assets/images/del_true.png');
  background-size: contain;
  border: none;
}

.checkbox input[type='checkbox'] {
  vertical-align: middle;
  width: 15px;
  height: 15px;
  display: none;
}
.btn_box {
  width: 100%;
  // margin-top: 30px;
  text-align: center;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 30px;
  // flex-direction: row;
  // flex-wrap: wrap;
}
.btn_box div {
  margin: 0 auto;
}
.btn {
  width: 100px;
  height: 30px;
  // background: rgba(70, 159, 255, 0.1);
  // border: 1px solid #72e6ff;
  // box-shadow: 1px 4px 6px 0px #0c1422;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  // color: #72e6ff;
  line-height: 27px;
  opacity: 0.8;
  margin: 0 auto;
  @include themify($themes) {
    background: themed('btn');
    color: themed('btn_color');
  }
}
.theme-light .btn {
  border: 1px solid #027aff;
}
.theme-dark .btn {
  border: 1px solid #72e6ff;
}
.del_btn {
  background: #ff4c4c !important;
  border: 1px solid #ff4c4c !important;

  @include themify($themes) {
    color: themed('btn_color') !important;
  }
}
.deloption {
  // opacity: 0.2;
  color: #ff4b4b !important;
  background: rgba(255, 75, 75, 0.2) !important;
  border: none;
}
.edit_btn {
  width: 60px;
  display: flex;
  align-items: flex-end;
  position: relative;
  transition: height 2s;
  -moz-transition: height 2s; /* Firefox 4 */
  -webkit-transition: height 2s; /* Safari 和 Chrome */
  -o-transition: height 2s; /* Opera */
  cursor: pointer;
  color: #72e6ff;

  // @include themify($themes) {
  //   color: themed('inform_btn_list_font');
  // }
}
// .edit_btn2:hover {
//   width: 60px;
//   margin: 10px auto 0;
// }
// .theme-light .edit_btn {
//   color: #027aff;
//   border-bottom: 1px solid #027aff;
// }
// .theme-dark .edit_btn {
//   color: #72e6ff;
//   border-bottom: 1px solid #72e6ff;
// }
.edit_btn2 {
  width: 60px;
  height: 30px;
  display: flex;
  align-items: flex-end;
  position: relative;
  color: #101620;
  // transition: height 2s;
  // -moz-transition: height 2s; /* Firefox 4 */
  // -webkit-transition: height 2s; /* Safari 和 Chrome */
  // -o-transition: height 2s; /* Opera */
  // transition: width 1s;
  // -moz-transition: width 1s; /* Firefox 4 */
  // -webkit-transition: width 1s; /* Safari 和 Chrome */
  // -o-transition: width 1s; /* Opera */
  // margin: 10px auto 0;
  // @include themify($themes) {
  //   color: themed('eidt_font');
  // }
}
.span-test {
  font-size: 12px;
  display: block;
  height: 2px;
  width: 100%;
  // transition: height 1s;
  @include themify($themes) {
    background: themed('inform_btn_list');
  }
}
.edit_text {
  width: 100%;
  height: 30px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  left: 0;
}
// .edit_btn2:target {
//   // animation: moves 6s;
//   height: 30px;
// }
// @keyframes moves{
//    0%{height:5px;}
// 50%{height:15px;}
// 100%{height:30px;}
// }
.title {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  // color: #ffffff;
  line-height: 20px;
  width: 100px;
  height: 30px;
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; //文本不换行，这样超出一行的部分被截取，显示...
  //  box-sizing:border-box;
  //  background-repeat: no-repeat;
  // padding-bottom:10px;
  cursor: pointer;
  @include themify($themes) {
    color: themed('table_color_h');
  }
}
.title select {
  width: 92px;
  height: 30px;
  border: none;
  outline: none;
  background: none;
  // color: #ffffff;
  appearance: none;
  text-align: center;
  text-align-last: center;
  margin-left: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; //文本不换行，这样超出一行的部分被截取，显示...
  // white-space: normal;

  @include themify($themes) {
    color: themed('table_color_h');
  }
}
.title select option {
  text-align: center;
  color: black;
}
.title_bj1 {
  // background-image: url('../../assets/images/tabel_bj1.png');
  background-size: 100% 100%;
  @include themify($themes) {
    background: themed('tabel_bj1');
  }
}
.title_bj2 {
  min-width: 106px;
  // background-image: url('../../assets/images/tabel_bj2.png');
  // background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  margin-left: 5px;
  height: 32px;
  @include themify($themes) {
    background: themed('tabel_bj2');
  }
}
.num_box {
  height: 30px;
  display: flex;
}
.num {
  min-width: 57px;
  height: 30px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 30px;
}
.num input {
  max-width: 44px;
  height: 100%;
  border: none;
  background: none;
  outline: none;
  text-align: center;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 30px;
  @include themify($themes) {
    color: themed('table_color_h');
  }
}
.Number_victims {
  margin-left: 17px;
  font-size: 14px;
  // color: rgba(255, 255, 255, 0.7);
  @include themify($themes) {
    color: themed('table_color_h');
  }
}
.fontcolor {
  margin-right: 3px;
  @include themify($themes) {
    color: themed('font_num');
  }
}
.number {
  display: inline-block;
  min-width: 47px;
  height: 24px;
  font-size: 18px;
  text-align: center;
  margin: 0 10px;
  @include themify($themes) {
    background: themed('number_bj');
    color: themed('number_font');
  }
}
.back {
  margin: 0 auto;
  border: none !important;
  background: rgba(69, 158, 255, 0.1);
  line-height: 30px;
  @include themify($themes) {
    background: themed('yjdd_back');
  }
}
.list_item {
  margin-top: 10px;
  font-size: 14px;
  // color: #ffffff;
  // opacity: 0.5;
  @include themify($themes) {
    color: themed('list_item');
  }
}
.materialback {
  margin: 0 auto;
}
.select_box {
  margin-left: 9px;
  margin-top: 20px;
  display: flex;
}
.select_box .checkbox {
  margin-right: 5px;
}
.select_box select {
  height: 30px;
  // color: #6bd9f1;
  // border: 1px solid #71e6ff;
  background: none;
  // border-radius: 5px;
  outline: none;
  @include themify($themes) {
    color: themed('input_label');
  }
}
.theme-light .select_box select {
  border: none;
  border-bottom: 1px solid #027aff;
}
.theme-dark .select_box select {
  border: none;
  border-bottom: 1px solid #72e6ff;
}
.select_box select option {
  color: black;
}
.Mobilization_itme {
  width: 100%;
  margin-top: 5px;
  display: flex;
  // color: #ffffff;
  font-size: 14px;
  @include themify($themes) {
    color: themed('table_color_h');
  }
  // justify-content:center;
  // align-items:center;
}
.Mobilization_itme img {
  width: 10px;
  height: 10px;
  margin: auto 0;
  margin-right: 10px;
}
// 滚动条整体部分
.conboxbor::-webkit-scrollbar {
  width: 4px;
  opacity: 1;
}
//滚动条里面的滑块
.conboxbor::-webkit-scrollbar-thumb {
  height: 20px;
  @include themify($themes) {
    background: themed('t-gdt-hk-bj');
  }
}
//滚动条的轨道
.conboxbor::-webkit-scrollbar-track {
  @include themify($themes) {
    background: themed('t-gdt-gd-bj');
  }
}
.container tbody::-webkit-scrollbar {
  width: 4px;
  opacity: 1;
}
//滚动条里面的滑块
.container tbody::-webkit-scrollbar-thumb {
  height: 20px;
  @include themify($themes) {
    background: themed('t-gdt-hk-bj');
  }
}
//滚动条的轨道
.container tbody::-webkit-scrollbar-track {
  @include themify($themes) {
    background: themed('t-gdt-gd-bj');
  }
}
.itemadd {
  width: 130px;
  height: 30px;
  background: rgba(0, 255, 18, 0.2);
  border: 1px solid #00ff12;
  // box-shadow: 0px 8px 8px 0px rgba(91, 112, 97, 0.5);
  opacity: 0.6;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 600;
  color: #00ff12;
  line-height: 30px;
  text-align: center;
}
//滚动条的轨道
.container::-webkit-scrollbar-track {
  @include themify($themes) {
    background: themed('t-gdt-gd-bj');
  }
}
.container::-webkit-scrollbar {
  width: 4px;
  opacity: 1;
}
//滚动条里面的滑块
.container::-webkit-scrollbar-thumb {
  height: 20px;
  @include themify($themes) {
    background: themed('t-gdt-hk-bj');
  }
}
</style>
